<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
       <cpn :number1 = "num1" :number2 = "num2" 
       @num1change = "num1change" @num2change = "num2change"></cpn>

    </div>
    <template id="cpn">
        <div>
            <h2>prors:{{number1}}</h2>
            <h2>data:{{dnumber1}}</h2>
            <!-- <input type="text" v-model="dnumber1"> -->
            <input type="text" :value="dnumber1" @input="num1Input">
            <h2>prors:{{number2}}</h2>
            <h2>data:{{dnumber2}}</h2>
            <!-- <input type="text" v-model="dnumber2"> -->
            <input type="text" :value="dnumber2" @input="num2Input">
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好呀！',
                num1:1,
                num2:2,
            },
            methods:{
                num1change(value){
                    // this.num1 = value
                    // 字符串转数字
                    // this.num1 = parseInt(value);
                    this.num1 = parseFloat(value);
                },
                num2change(value){
                    // this.num2 = value
                    this.num2 =  parseFloat(value);
                },


            },
            components:{
                cpn:{
                    template:'#cpn',
                    props:{
                        number1:Number,
                        number2:Number,
                    },
                        data(){
                            return{
                                dnumber1:this.number1,
                                dnumber2:this.number2
                            }
                        },
                        methods:{
                            num1Input(event){
                                // 将input中的value赋值到dnumber中
                                this.dnumber1 = event.target.value;
                                // 为了让父组件可以修稿值，发出一个事件
                                this.$emit("num1change",this.dnumber1)
                                // 3.同时修改dnumber2的值
                                this.dnumber2 = this.dnumber1*100
                                this.$emit("num2change",this.dnumber1)
                            },
                            num2Input(event){
                                this.dnumber2 = event.target.value
                                this.$emit("num1change",this.dnumber2)
                                // 3.同时修改dnumber2的值
                                this.dnumber1 = this.dnumber2/100
                                this.$emit("num1change",this.dnumber1)
                            },
                        }

                    
                }
            }
        })
    </script>
</body>
</html>